import React from 'react';
import { connect } from 'dva';
import { Icon } from 'antd';
import router from 'umi/router';
import Rectangle from './Rectangle';
import styles from '../index.less';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1235632_bphjv9qycag.js',
});
const creator = (type, payload) => ({ type, payload });
class CompletedPerson extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const { dispatch, history } = this.props;
    console.log(history);
    const { location } = history;
    const { query } = location;
    const { name } = query;
    dispatch(creator('person/getPerson', { name }));
  }
  render() {
    console.log(this.props.person.singlePerson)
    const {
      name,
      overview,
      chineseName,
      birthDate,
      englishName,
      deathDate,
      alias,
      college,
      nationality,
      career,
      nation,
      represent,
      birthPlace,
      achievement,
      lifetime,
      evaluation,
      imageUrl,
    } = this.props.person.singlePerson[0];
    return (
      <div>
          <div style={{ margin: 20 }}>
            <a>
              <IconFont
                type="icon-back"
                style={{ fontSize: 40 }}
                onClick={() => router.goBack(1)}
              />
            </a>
            <div className={styles.preview_container}>
              <div>
                <h1 style={{ fontSize: 30 }}>{name}</h1>
              </div>
              <div>
                <Rectangle color="#FFD700" title="人物概述" />

                <div className={styles.preview_desc} style={{ minHeight: 180 }}>
                  <img
                    src={imageUrl}
                    style={{ width: 180, height: 180, float: 'left', marginRight: 10 }}
                  />
                  {overview && overview.map((item, index) => <p key={index}>{item.desc}</p>)}
                </div>
              </div>
              <div style={{ clear: 'both' }}>
                <Rectangle color="#ADFF2F" title="基本信息" />
                <div style={{ display: 'flex', flexWrap: 'wrap' }} className={styles.preview_desc}>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>中文名：</span>
                    {chineseName}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>出生日期：</span>
                    {birthDate}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>英文名：</span>
                    {englishName}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>逝世日期：</span>
                    {deathDate}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>别名：</span>
                    {alias}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>毕业院校：</span>
                    {college}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>国籍：</span>
                    {nationality}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>职业：</span>
                    {career}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>民族：</span>
                    {nation}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>代表作品：</span>
                    {represent}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>出生地：</span>
                    {birthPlace}
                  </p>
                  <p className={`${styles.border} ${styles.width}`}>
                    <span className={styles.align_right}>主要成就：</span>
                    {achievement}
                  </p>
                </div>
              </div>
              <div>
                <Rectangle color="#9370DB" title="人物生平" />
                {lifetime &&
                  lifetime.map((item, index) => (
                    <div key={index}>
                      <h4 className={styles.preview_desc}>{item.title}</h4>
                      <p className={styles.preview_lifetime}>{item.desc}</p>
                    </div>
                  ))}
              </div>
              <div>
                <Rectangle color="#54FF9F" title="社会评价" />
                <div className={styles.preview_desc}>{evaluation}</div>
              </div>
            </div>
          </div>
      </div>
    );
  }
}

export default connect(({ person }) => ({ person }))(CompletedPerson);
// import { history } from 'umi';
// export default props=>{
//   const {history}=props;
//   const {location}=history
//   const {query}=location;
//   const {name}=query;
//   return(<div>1211</div>)
// }
